<template>
    <div class="console">
        <n-grid cols="s:2 m:3 l:4 xl:4 2xl:4" responsive="screen" :x-gap="12" :y-gap="8">
            <n-gi>
                <n-card class="rounded-lg">
                    <div class="flex justify-between items-end">
                        <n-icon size="36" color="#0e80ed">
                            <DashboardOutlined />
                        </n-icon>
                        <p class="text-gray-500">周</p>
                    </div>
                    <div class="text-sm py-1">访问量</div>
                    <div class="py-2 flex justify-between items-end">
                        <CountTo :startVal="1" :endVal="98735" class="text-3xl font-medium" />
                        <div class="flex items-center">
                            <div
                                style="background-color: #00984e"
                                class="text-white text-sm px-2 rounded-xl mr-2"
                            >+10%</div>
                            <n-icon size="16" color="#00984e">
                                <ArrowUpOutlined />
                            </n-icon>
                        </div>
                    </div>
                </n-card>
            </n-gi>
            <n-gi>
                <n-card class="rounded-lg">
                    <div class="flex justify-between items-end">
                        <n-icon size="36" color="#ac70e8">
                            <DashboardOutlined />
                        </n-icon>
                        <p class="text-gray-500">周</p>
                    </div>
                    <div class="text-sm py-1">销售额</div>
                    <div class="py-2 flex justify-between items-end">
                        <CountTo
                            :startVal="1"
                            :endVal="3980"
                            class="text-3xl font-medium"
                            prefix="￥"
                        />
                        <div class="flex items-center">
                            <div
                                style="background-color: #d01f47"
                                class="text-white text-sm px-2 rounded-xl mr-2"
                            >-20%</div>
                            <n-icon size="16" color="#d01f47">
                                <ArrowDownOutlined />
                            </n-icon>
                        </div>
                    </div>
                </n-card>
            </n-gi>
            <n-gi>
                <n-card class="rounded-lg">
                    <div class="flex justify-between items-end">
                        <n-icon size="36" color="#f88a6b">
                            <DashboardOutlined />
                        </n-icon>
                        <p class="text-gray-500">周</p>
                    </div>
                    <div class="text-sm py-1">订单量</div>
                    <div class="py-2 flex justify-between items-end">
                        <CountTo :startVal="1" :endVal="3685" class="text-3xl font-medium" />
                        <div class="flex items-center">
                            <div
                                style="background-color: #00984e"
                                class="text-white text-sm px-2 rounded-xl mr-2"
                            >+35%</div>
                            <n-icon size="16" color="#00984e">
                                <ArrowUpOutlined />
                            </n-icon>
                        </div>
                    </div>
                </n-card>
            </n-gi>
            <n-gi>
                <n-card class="rounded-lg">
                    <div class="flex justify-between items-end">
                        <n-icon size="36" color="#ac70e8">
                            <DashboardOutlined />
                        </n-icon>
                        <p class="text-gray-500">月</p>
                    </div>
                    <div class="text-sm py-1">成交额</div>
                    <div class="py-2 flex justify-between items-end">
                        <CountTo
                            :startVal="1"
                            :endVal="29856"
                            class="text-3xl font-medium"
                            prefix="￥"
                        />
                        <div class="flex items-center">
                            <div
                                style="background-color: #d01f47"
                                class="text-white text-sm px-2 rounded-xl mr-2"
                            >-5%</div>
                            <n-icon size="16" color="#d01f47">
                                <ArrowDownOutlined />
                            </n-icon>
                        </div>
                    </div>
                </n-card>
            </n-gi>
        </n-grid>
        <n-grid
            cols="s:1 m:1 l:2 xl:2 2xl:2"
            responsive="screen"
            :x-gap="12"
            :y-gap="8"
            class="mt-2"
        >
            <n-gi>
                <n-card title="访问量" size="small" :segmented="{ content: 'hard' }">
                    <div ref="chart1Ref" class="w-full h-72"></div>
                </n-card>
            </n-gi>
            <n-gi>
                <n-card title="区域排行" size="small" :segmented="{ content: 'hard' }">
                    <div ref="chart2Ref" class="w-full h-72"></div>
                </n-card>
            </n-gi>
            <n-gi>
                <n-card title="销售额" size="small" :segmented="{ content: 'hard' }">
                    <div ref="chart3Ref" class="w-full h-72"></div>
                </n-card>
            </n-gi>
            <n-gi>
                <n-card title="访问来源" size="small" :segmented="{ content: 'hard' }">
                    <div ref="chart4Ref" class="w-full h-72"></div>
                </n-card>
            </n-gi>
        </n-grid>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted, Ref, computed, unref, reactive } from 'vue';
import { DashboardOutlined, ArrowDownOutlined, ArrowUpOutlined } from '@vicons/antd';
import { CountTo } from "@/components/CountTo/index"
import { useEcharts } from "@/hooks/web/useEcharts"
import { graphic } from 'echarts'

export default defineComponent({
    name: "console",
    components: {
        DashboardOutlined, CountTo, ArrowDownOutlined, ArrowUpOutlined
    },
    setup() {

        // 获取chart1
        const chart1Ref = ref<HTMLDivElement | null>(null);
        const chart1 = useEcharts(chart1Ref as Ref<HTMLDivElement>);
        // 获取chart2
        const chart2Ref = ref<HTMLDivElement | null>(null);
        const chart2 = useEcharts(chart2Ref as Ref<HTMLDivElement>);
        // 获取chart3
        const chart3Ref = ref<HTMLDivElement | null>(null);
        const chart3 = useEcharts(chart3Ref as Ref<HTMLDivElement>);
        // 获取chart4
        const chart4Ref = ref<HTMLDivElement | null>(null);
        const chart4 = useEcharts(chart4Ref as Ref<HTMLDivElement>);

        /**
         * @description: 获取 访问量
        */
        const getChart1 = () => {
            // 模拟接口调用
            setTimeout(() => {
                const x: string[] = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
                const y: Array<any> = [33333, 55555, 66666, 33333, 14000, 36000, 66666, 44444, 22222, 11111, 4000, 2000];

                chart1.setOptions({
                    tooltip: {
                        trigger: 'item',
                        borderColor: '#6fb5f4', // 提示框浮层的边框颜色。
                        renderMode: 'html',
                        extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);', // 额外附加到浮层的 css 样式
                        confine: false, // 是否将 tooltip 框限制在图表的区域内。
                    },
                    xAxis: {
                        type: 'category',
                        data: x,
                        axisTick: {
                            show: false,
                        },
                    },
                    yAxis: [
                        {
                            type: 'value',
                            axisTick: {
                                show: false,
                            },
                        },
                    ],
                    grid: { left: '1%', right: '2%', top: '2%', bottom: 0, containLabel: true },
                    series: [
                        {
                            data: y,
                            type: 'bar',
                            itemStyle: {
                                color: new graphic.LinearGradient(1, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: '#006af5',
                                    },
                                    {
                                        offset: 1,
                                        color: '#6fb5f4',
                                    },
                                ]),
                            },
                        },
                    ],
                })
            }, 1000)
        }

        /**
         * @description: 获取 区域排行
        */
        const getChart2 = () => {
            // 模拟接口
            setTimeout(() => {

                const x: number[] = [10, 10, 30, 50, 50, 80, 90, 100, 100, 100];
                const y: string[] = ["四川省", "湖南省", "陕西省", "上海市", "江苏省", "广东省", "湖南省", "辽宁省", "浙江省", "福建省"];

                chart2.setOptions({
                    grid: { left: '1%', right: '2%', top: '2%', bottom: 0, containLabel: true },
                    xAxis: {
                        type: "value",
                        axisLabel: {
                            // 坐标轴刻度不显示
                            show: false
                        },
                        splitLine: {
                            // 坐标轴分隔线 不显示
                            show: false
                        }
                    },
                    yAxis: [
                        {
                            type: "category",
                            data: y,
                            axisLine: {
                                // 坐标轴线 不显示
                                show: false
                            },
                            axisTick: {
                                // 坐标轴刻度 不显示
                                show: false
                            },
                            axisLabel: {
                                // 坐标轴刻度标签
                                show: true,
                            }
                        }
                    ],
                    series: [
                        {
                            type: "bar",
                            data: x,
                            barWidth: 16,
                            itemStyle: {
                                borderRadius: 8,
                                color: "#0084fe",
                            }
                        }
                    ]
                })
            }, 500)
        }

        /**
         * @description: 获取 销售额
        */
        const getChart3 = () => {
            // 模拟接口
            setTimeout(() => {
                const x: string[] = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
                const y1: number[] = [820, 932, 1002, 901, 954, 934, 1290, 1360, 1450, 1400, 1350, 1320];
                const y2: number[] = [620, 712, 802, 701, 734, 734, 1090, 1160, 1250, 1200, 1150, 1120];

                chart3.setOptions({
                    trigger: 'axis',
                    tooltip: {
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        },
                    },
                    grid: { left: '1%', right: '2%', top: '13%', bottom: 0, containLabel: true },
                    legend: {
                        right: "3%",
                        data: ["当月销售额", "月均销售额"]
                    },
                    xAxis: [
                        {
                            type: "category",
                            data: x,
                            boundaryGap: false
                        }
                    ],
                    yAxis: [
                        {
                            type: "value",
                            name: "元"
                        }
                    ],
                    series: [
                        {
                            name: "当月销售额",
                            type: "line",
                            stack: "total",
                            data: y1,
                            areaStyle: {}
                        },
                        {
                            name: "月均销售额",
                            type: "line",
                            stack: "total",
                            data: y2,
                            areaStyle: {}
                        }
                    ]
                })
            }, 500);
        }

        /**
         * @description: 获取 访问来源
        */
        const getChart4 = () => {
            // 模拟接口
            setTimeout(() => {
                const data: any[] = [
                    { value: 300, name: "视频广告" },
                    { value: 1048, name: "搜索引擎" },
                    { value: 745, name: "直接访问" },
                    { value: 580, name: "访问来源" },
                    { value: 484, name: "联盟广告" }
                ];
                chart4.setOptions({
                    title: {
                        text: "访问来源",
                        subtext: "全站来源统计",
                        left: "center"
                    },

                    tooltip: {
                        trigger: "item"
                    },
                    legend: {
                        orient: "vertical",
                        left: "left"
                    },
                    series: [
                        {
                            type: "pie",
                            radius: "60%",
                            data: data
                        }
                    ]
                })
            }, 500)
        }

        onMounted(() => {
            getChart1();
            getChart2();
            getChart3();
            getChart4();
        })

        return { chart1Ref, chart2Ref, chart3Ref, chart4Ref }
    }
})

</script>
<style lang="less" scoped>
</style>